<template>
  <div class="vy-cmp-exam-item vy-cmp-exam-tiankong">
    <!-- 考试内容 - 填空题 - 复用组件 -->
    <a-row>
      <a-col :span="6">
        <span class="vy-title">{{ title }}</span>
      </a-col>
      <a-col :span="16">&nbsp;</a-col>
      <a-col :span="2">
        <a-button type="link" @click="click_del_exam">删除</a-button>
      </a-col>
    </a-row>
    <a-row>
      <!-- <a-col :span="3" class="vy-label">标题</a-col> -->
      <a-col :span="24">
        <a-input placeholder="请输入问题内容，最多输入1000字" v-model="source.title"></a-input>
      </a-col>
    </a-row>
    <template v-if="source.options && source.options.length">
      <a-row v-for="(option, index) in source.options" :key="index">
        <a-col :span="2" class="vy-label">{{ option.name }}</a-col>
        <a-col :span="22">
          <a-textarea placeholder="点此输入问答内容" v-model="option.answer" :rows="4" style="resize: none;"/>
        </a-col>
      </a-row>
    </template>

    <!-- 正确答案 -->
    <a-row>
      <a-col :span="3" class="vy-label">正确答案</a-col>
      <a-col :span="21">
        <a-input placeholder="请输入正确答案" v-model="source.correctAnswer"></a-input>
      </a-col>
    </a-row>
     <a-row>
      <a-col :span="3" class="vy-label vy-label-required">
        本题分数
      </a-col>
      <a-col class="score-content" :span="15">
        <div class="score-content-input">
          <a-input
            class="ant-input-normal"
            type="number"
            max="100"
            v-model="source.score"
          ></a-input
          ><span class="score-content-tip">分</span>
        </div>
        <div class="score-content-tip">
          （剩余可设置分数<span class="score-content-number">{{
            totalscore
          }}</span
          >分）
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" class="vy-label">
        <a-icon type="edit" /><span style="padding-left: 5px;">设置答案解析</span>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" class="vy-label">
        <a-textarea placeholder="请输入答案解析" v-model="source.analysis" :rows="4" style="resize: none;"/>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "vy-cmp-exam-tiankong",
  props: ["title", "index", "source", "totalscore"],
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      // this.add_default_option(); // 添加默认的选项
    });
  },
  methods: {
    // 添加默认的选项
    add_default_option() {
      // 没有选项列表时，追加默认选项
      if (this.source.options && !this.source.options.length) {
        this.source.options.push({
          id: +new Date(),
          name: "内容",
          answer: ""
        });
      }
    },
    // 删除当前考试
    click_del_exam() {
      this.$emit("del_exam", this.index);
    }
  }
};
</script>
<style lang="scss">
.vy-cmp-exam-tiankong {
  padding: 10px;
  .vy-title {
    background: rgba(238, 244, 255, 1);
    padding: 10px;
    border-radius: 4px;
    font-weight: 400;
    color: rgba(127, 159, 255, 1);
  }
  .vy-label {
    // text-align: right;
    // padding-right: 20px;
    text-align: left;
    padding-right: 10px;
  }
  .vy-label-required::after {
    content: "*";
    color: red;
    margin-left: 5px;
    vertical-align: middle;
  }
  .ant-row {
    padding: 5px 10px;
    .ant-btn-link {
      color: #444040;
    }
  }
}
</style>

